<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <th:block th:include="include :: header('安全帽轨迹')" />
    <th:block th:include="include :: layout-latest-css" />
</head>

<style>
    html,body,#container{
        height:100%;
        width:100%;
    }
</style>


<body>
<div id="container"></div>

<th:block th:include="include :: footer" />

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=f24ba9ddfe40752f61fe95ef11869448"></script>
<script type="text/javascript">

    var map = new AMap.Map("container", {
        center: [120.370548,31.479413],
        zoom: 14
    });

    // 创建包含4个节点的折线及文字标注
    var path = [];

    var polyline2;
    var text2;

    // 坐标转换

    $(function() {
        getLog();
    })


    function getLog() {
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "biz/point/log",
            data : {},
            async : false,
            error : function(request) {
                console.log("系统错误");
            },
            success : function(data) {


                while(path.length > 0) {
                    path.pop();
                }

                if (data!=null && data.length>0){
                    for (var i=0;i<data.length;i++){
                       path[i] =new AMap.LngLat(data[i].longitude,data[i].latitude);

                    }
                }

                parse();

            }
        });
    }


    function parse() {
        AMap.convertFrom(path, 'gps', function (status, result) {
            if (result.info === 'ok') {
                var path2 = result.locations;
                polyline2 = new AMap.Polyline({
                    path: path2,
                    borderWeight: 2, // 线条宽度，默认为 1
                    strokeColor: 'blue', // 线条颜色
                    lineJoin: 'round' // 折线拐点连接处样式
                });
                map.add(polyline2);
                text2 = new AMap.Text({
                    position: result.locations[0],
                    text: '',
                    offset: new AMap.Pixel(-20, -20)
                })
                map.add(text2);
                //放大
                map.setFitView();

            } else {
                console.log(result);
            }
        });

    }


</script>



</body>
</html>

